<template>
	<view class="stay-cost-detail">
		<view class="head">
			<view class="icon-box">
				<icon-svg icon-class="jiudian" style="color:#B29DDD;"></icon-svg>
			</view>
			<view class="conetnt-box">
					<text style="font-size: 40rpx;">住宿</text>
					<text style="color: #ccc;font-size: 32rpx;margin-top: 10rpx;">COST3</text>
			</view>
		</view>
		<view class="content">
			<form  class="handFormBox" @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item" v-for="(item, index) in formList" :key="index">
					<view>
						<view class="title">{{item.title}}:</view>
						<view>
							<input class="uni-input" v-model="item.value" 
								:name="item.name" :placeholder="item.placeholder" 
							/>
						</view>
					</view>
				</view>
			</form>
		</view>
		<view class="attachment">
			<text style="display: block;">附件:</text>
			<image src="/static/bill.png"  mode="aspectFit" @tap="_previewImage('/static/bill.png')" class="img"/>
		</view>
		<view class="uni-pagination-box">
			<uni-pagination  prev-text="上一页"  next-text="下一页"  total="20" current="1"></uni-pagination>
		</view>
	</view>
</template>

<script>
import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
export default{
	components: {uniPagination},
	data(){
		return{
			formList:[
				{'title': '预算承担项目','placeholder': '请输入标题','name': 'input','value': '佛山项目'},
				{'title': '出差开始日期','placeholder': '请输入名称','name': 'input','value': '2021-01-01'},
				{'title': '出差结束日期','placeholder': '请输入日期','name': 'input','value': '2021-01-03'},
				{'title': '出差天数','placeholder': '','name': 'input','value': '3'},
				{'title': '出差地址','placeholder': '','name': 'input','value': '北京'},
				{'title': '收支项目','placeholder': '','name': 'input','value': '住宿费'},
				{'title': '报销金额','placeholder': '请输入借款金额','name': 'input','value': '¥1,500.00'},
			],
		}
	},
	methods:{
		_previewImage(image) {
						var imgArr = [];
						imgArr.push(image);
						//预览图片
						uni.previewImage({
							urls: imgArr,
							current: imgArr[0]
						});
					}
	}
}
</script>

<style lang="scss" scoped>
.stay-cost-detail{
	padding-bottom: 100rpx;
	.head,.content{
		background: #fff;
	}
	.head{
		margin-top: 40rpx;
		padding:20rpx;
		display: flex;
		  .conetnt-box{
		  	margin-left: 20rpx;
		  	text{
		  		display:block;
		  	}
		  }
		  .svg-icon{
			  font-size: 1.4em;
			  margin-top: 40rpx;
		  }
	}
	.content{
		margin-top: 20rpx;
		padding:20rpx;
		.handFormBox{
			width: 100%;
		 .uni-form-item{
			 color: #595959;
			 font-size: 34rpx;
			 border-bottom: 2px solid #EEEEEE;
			 .title{
				 padding: 10rpx 0;
			 }
		 }
		}
	}
	.uni-pagination-box{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		color: #33B4C5;
		background: #fff;
	}
	.attachment{
		padding: 30rpx;
		margin-top: 30rpx;
		background-color: white;
		.img{
			display: block;
			margin: 0 auto;
		}
	}
}
</style>
